<template name="ticketSearch">
  <ul class="view">
    <li>
      <el-radio v-model="radio" label="1">单程</el-radio>
      <el-radio v-model="radio" label="2">返程</el-radio>
    </li>
    <li class="goLi">
      <span>出发城市</span>
      <el-input v-model="go" placeholder="中文/拼音/简拼"></el-input>
    </li>
    <li class="toLi">
      <span>到达城市</span>
      <el-input v-model="to" placeholder="中文/拼音/简拼"></el-input>
    </li>
    <li class="in">换</li>
    <li>
      <span>出发日期</span>
      <el-input v-model="start" placeholder="yyyy-mm-dd" suffix-icon="el-icon-date"></el-input>
    </li>
    <li>
      <span>返回日期</span>
      <el-input v-model="end" placeholder="yyyy-mm-dd" suffix-icon="el-icon-date"></el-input>
    </li>
    <li>
      <el-checkbox
        v-model="children"
        style="color:#ccc;font-size:12px;"
        class="children"
      >携带儿童（2-12岁）</el-checkbox>
    </li>
    <li>
      <el-button type="primary">
        <i class="el-icon-search"></i> 搜索
      </el-button>
    </li>
  </ul>
</template>

<script>
export default {
  name: "ticketSearch",
  data() {
    return {
      radio: "1",
      go: "",
      to: "",
      start: "",
      end: "",
      goTime: "",
      children: false
    };
  },
  methods: {
    getDate() {
      let date = new Date();
      let Y = date.getFullYear();
      let M = date.getMonth() + 1;
      if (M < 10) {
        M = `0${M}`;
      }
      //如果提前一天超过这个月的最大数，则跳转到下个月的一号，因不是真正项目，顾不那么麻烦了
      let D = date.getDate() + 1;
      this.start = `${Y}-${M}-${D}`;
    }
  },
  watch: {
    radio(newVal) {
      //此处也一样
      parseInt(newVal) == 1 ? (this.end = "") : (this.end = `2020-07-03`);
    }
  },
  mounted() {
    this.getDate();
  }
};
</script>

<style lang="stylus" scoped>
.view {
  width: 360px;
  height: 350px;
  border: 2px solid #ffa500;
  padding-right: 40px;
  box-sizing: border-box;
  position: relative;

  >>> input {
    &:focus {
      border: 1px solid #ff9d00;
    }
  }

  li {
    display: flex;
    height: 40px;
    justify-content: center;
    align-items: center;
    margin: 0 auto 5px;

    span {
      width: 70px;
      font-size: 14px;
    }

    >>> .el-radio__input.is-checked .el-radio__inner {
      border-color: orange;
      background: orange;
    }

    >>> .is-checked+.el-radio__label {
      color: orange;
    }

    >>> .el-checkbox__inner {
      border-radius: 50%;
    }

    >>> .el-checkbox__input.is-focus .el-checkbox__inner {
      border: 1px solid #DCDFE6;
    }

    >>> .el-checkbox__input.is-focus .el-checkbox__inner::after {
      transform: rotate(0deg) scaleY(1);
      background-color: #fff;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      top: 3px;
      left: 3px;
    }

    >>> .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: orange;
      border-color: orange;
    }

    >>> .el-checkbox__input.is-checked .el-checkbox__inner::after {
      transform: rotate(0deg) scaleY(1);
      background-color: #fff;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      top: 3px;
      left: 3px;
    }

    >>> .el-button--primary {
      width: 222px;
      margin-left: 40px;
      height: 40px;
      background-color: orange;
      border: 1px solid orange;
      font-size: 17px;
    }

    .children {
      >>> .is-checked+.el-checkbox__label {
        color: #ccc;
      }
    }

    >>> .el-input {
      width: auto;
    }

    >>> .el-input__inner {
      width: 222px;
      height: 38px;
    }
  }

  .goLi {
    position: relative;

    &:before {
      content: '';
      width: 20px;
      height: 12px;
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
      position: absolute;
      right: -14px;
      top: 17px;
    }
  }

  .toLi {
    position: relative;

    &:before {
      content: '';
      width: 20px;
      height: 12px;
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      position: absolute;
      right: -14px;
      top: 9px;
    }
  }

  .in {
    width: 20px;
    height: 20px;
    position: absolute;
    background-color: #ccc;
    font-size: 12px;
    color: #fff;
    border-radius: 2px;
    right: 16px;
    top: 77px;
    cursor: pointer;

    &:hover {
      background-color: orange;
    }
  }
}
</style>